<template>
  <div class="container" >
    <!-- 失效券页面 -->
    <div class="title1" >已失效</div>
    <div  v-for="(item ,index) in list"
         :key="index">
       <div class="ticket" v-if="item.status !==0">
      <div class="left" >
        <div class="title">
          <span class="red">[{{item.ticket_type_name}}]</span>                 
         {{item.name}}
        </div>
        <div class="desc" v-if="item.describe">{{item.describe}}</div>
        <div class="num">  {{item.validity_start_time}}-{{item.validity_end_time}}</div>
      </div>
      <div class="right">
         <div class="text" v-if="item.status == 1">{{item.status_name}}</div>
         <div class="text" v-if="item.status == 2">{{item.status_name}}</div>
         <div class="text" v-if="item.status == 3">{{item.status_name}}</div>       
         <div class="text" v-if="item.status == 4">{{item.status_name}}</div>
         <!-- 已核销 -->
          <div class="text" v-if="item.status == 5">{{item.status_name}}</div>
          <!-- 待退款 -->
          <div class="text" v-if="item.status == 6">{{item.status_name}}</div>
      </div>
      <!-- 挂售邮戳 -->
      <img :src="ImgBaseUrl+'/h5_images/mp_images/3.3/youchuo.png'" alt="" class="youchuo" v-if="item.status == 1">
      <!-- 已售卖 -->
      <img :src="ImgBaseUrl+'/h5_images/mp_images/3.3/youchuo.png1'" alt="" class="youchuo" v-if="item.status == 2">
       <!-- 已转让 -->
      <img :src="ImgBaseUrl+'/h5_images/mp_images/3.3/youchuo3.png'" alt="" class="youchuo" v-if="item.status == 3">
       <!-- 已过期 -->
      <img :src="ImgBaseUrl+'/h5_images/mp_images/3.3/youchuo2.png'" alt="" class="youchuo" v-if="item.status == 4">
       <!-- 已核销 -->
      <img :src="ImgBaseUrl+'/h5_images/mp_images/3.3/youchuo5.png'" alt="" class="youchuo" v-if="item.status == 5">
       <!-- 待退款 -->
      <img :src="ImgBaseUrl+'/h5_images/mp_images/3.3/youchuo6.png'" alt="" class="youchuo" v-if="item.status == 6">
    </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data() {
    return {
      ImgBaseUrl: common.image_response //img 域名
    };
  },
  props: {
    list: ""
  },
  methods: {},
  watch: {},

  onLoad() {},
  destroyed() {}
};
</script>


<style lang="less" scoped>
.container {
  // background: #fff;
  height: auto;
  padding: 10px 12px 0px;
  background: #f3f4f6;
   .title1 {
    width: 100%;
    height: 20px;
    line-height: 20px;
    box-sizing: border-box;
    padding: 0 12px;
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    // margin-top: 7px;
    margin-bottom: 12px;
  }
  .ticket {
    height: 121px;
    display: flex;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom:13px;
    .left {
      width: 82.9%;
      box-sizing: border-box;
      padding: 14px 14px 10px 14px;
      border-radius: 8px;
      background: #fff;
      .title {
        font-size: 14px;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        margin-bottom: 10px;
        .red {
          color: #999999
        }
      }
      .desc {
        width: 80%;
        font-size: 12px;
        color: rgba(153, 153, 153, 1);
       margin-bottom: 32px;
      }
      .num {
        font-size: 12px;
        color:#999999;
        // float: right;
      }
    }
    .right {
      width: 17.1%;
      height: 100%;
      border-radius: 8px;
      background:url('https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/3.3/gray_bg.png') no-repeat;
      background-size: 100% 100%;
      color:rgba(255,56,62,1);
      font-size:12px;
      text-align: center;
      position: relative;
      .text{
        width:14px;
        font-size:14px;
        color:#999999;
        margin: 34px auto;
      }
    }
    .youchuo{
      width: 11.68%;
      height: 38.52%;
      position: absolute;
      right: 0;
      top: 0;
      
    }
  }
}
</style>


